<template>
  <div>
    <div class="relative box intro-y grid 2xl:grid-cols-3 sm:grid-cols-1 gap-5">
      <div class="sm:col-span-1 2xl:col-span-1">
        <el-calendar v-model="selDate">
          <template #date-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </div>
      <div class="sm:col-span-1 2xl:col-span-1">
        <div
            class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">购方</h2>
        </div>
        <div class="p-3">
          <el-checkbox
              v-model="purchaserCheckAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
          <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="city in purchaser" :key="city" :label="city" :value="city">
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="sm:col-span-1 2xl:col-span-1">
        <div
            class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">售方</h2>
        </div>
        <div class="p-3">
          <el-checkbox
              v-model="sellerCheckAll"
              :indeterminate="sellerIsIndeterminate"
              @change="handleSellerCheckAllChange"
          >
            全选
          </el-checkbox>
          <el-checkbox-group
              v-model="sellerCheckedCities"
              @change="handleSellerCheckedCitiesChange"
          >
            <el-checkbox v-for="city in seller" :key="city" :label="city" :value="city">
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!--      <div class="sm:col-span-1 2xl:col-span-2">-->
      <!--        <div class="title text-center p-3">外来电交易计划管理</div>-->
      <!--        <chart :tableData="tableData"/>-->
      <!--      </div>-->
    </div>
    <DataBox
        title="采购数量"
        :tableData="tableData"
        :powerTypes="powerTypes"
        seriesType="bar"
        @tabChange="(index) => handleTabChange('purchase', index)"
    />
    <DataBox
        title="销售数量"
        :tableData="tableData"
        :powerTypes="powerTypes2"
        seriesType="bar"
        @tabChange="(index) => handleTabChange('sale', index)"
    />
    <DataBox
        title="采购价格"
        :tableData="tableData"
        :powerTypes="powerTypes"
        @tabChange="(index) => handleTabChange('purchasePrice', index)"
    />
    <DataBox
        title="销售价格"
        :tableData="tableData"
        :powerTypes="powerTypes2"
        @tabChange="(index) => handleTabChange('salePrice', index)"
    />
    <!--    <div class="box mt-5 border-t intro-y">-->
    <!--      <div-->
    <!--          class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"-->
    <!--      >-->
    <!--        <h2 class="font-medium text-base mr-auto">采购数量</h2>-->
    <!--        <ul-->
    <!--            class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"-->
    <!--            role="tablist">-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':purchaseActiveIndex===1},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="false" @click="changePurchaseData(1)">图形-->
    <!--            </button>-->
    <!--          </li>-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':purchaseActiveIndex===2},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="true"-->
    <!--                    @click="changePurchaseData(2)">数据-->
    <!--            </button>-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--      </div>-->
    <!--      <div class="p-3">-->
    <!--        <wTable :tableData="tableData" v-show="showPurchase"/>-->
    <!--        <chart :tableData="tableData" v-show="!showPurchase"/>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="box mt-5 border-t intro-y">-->
    <!--      <div-->
    <!--          class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"-->
    <!--      >-->
    <!--        <h2 class="font-medium text-base mr-auto">销售数量</h2>-->
    <!--        <ul-->
    <!--            class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"-->
    <!--            role="tablist">-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':saleActiveIndex===1},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="false" @click="changeSaleData(1)">图形-->
    <!--            </button>-->
    <!--          </li>-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':saleActiveIndex===2},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="true"-->
    <!--                    @click="changeSaleData(2)">数据-->
    <!--            </button>-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--      </div>-->
    <!--      <div class="p-3">-->
    <!--        <wTable :tableData="tableData" v-show="showSale"/>-->
    <!--        <chart :tableData="tableData" v-show="!showSale"/>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="box mt-5 border-t intro-y">-->
    <!--      <div-->
    <!--          class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"-->
    <!--      >-->
    <!--        <h2 class="font-medium text-base mr-auto">采购价格</h2>-->
    <!--        <ul-->
    <!--            class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"-->
    <!--            role="tablist">-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':purchasePriceActiveIndex===1},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="false" @click="changePurchasePriceData(1)">图形-->
    <!--            </button>-->
    <!--          </li>-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':purchasePriceActiveIndex===2},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="true"-->
    <!--                    @click="changePurchasePriceData(2)">数据-->
    <!--            </button>-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--      </div>-->
    <!--      <div class="p-3">-->
    <!--        <wTable :tableData="tableData" v-show="showPurchasePrice"/>-->
    <!--        <chart :tableData="tableData" v-show="!showPurchasePrice"/>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="box mt-5 border-t intro-y">-->
    <!--      <div-->
    <!--          class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"-->
    <!--      >-->
    <!--        <h2 class="font-medium text-base mr-auto">销售价格</h2>-->
    <!--        <ul-->
    <!--            class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"-->
    <!--            role="tablist">-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':salePriceActiveIndex===1},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="false" @click="changeSalePriceData(1)">图形-->
    <!--            </button>-->
    <!--          </li>-->
    <!--          <li class="nav-item flex-1">-->
    <!--            <button :class="[{'active':salePriceActiveIndex===2},'nav-link','w-full','py-1.5','px-2']" type="button"-->
    <!--                    aria-selected="true"-->
    <!--                    @click="changeSalePriceData(2)">数据-->
    <!--            </button>-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--      </div>-->
    <!--      <div class="p-3">-->
    <!--        <wTable :tableData="tableData" v-show="showSalePrice"/>-->
    <!--        <chart :tableData="tableData" v-show="!showSalePrice"/>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import wTable from "./wTable.vue"
import chart from "./chart.vue"
import * as $api from "@/api/api";
import dayjs from "dayjs";
import DataBox from './dataBox.vue'

const selDate = ref(new Date());
const tableData = ref([]);
const powerTypes = ref([
  {label: '购方1', key: 'hydroPowerValue'},
  {label: '购方2', key: 'windPowerValue'},
  {label: '购方3', key: 'pvPowerValue'},
])
const powerTypes2 = ref([
  {label: '售方1', key: 'hydroPowerValue'},
  {label: '售方2', key: 'windPowerValue'},
  {label: '售方3', key: 'newEnergyPowerValue'}
])
const getData = (date) => {
  $api.NewEnergyOutputQuery({
    unitKey: "",
    userKey: "admin",
    key: "",
    date: date
  }).then(res => {
    console.log("=>(Main.vue:16) res", res);
    tableData.value = res;
  })
}
// 购方全选
const purchaserCheckAll = ref(false)
// 售方全选
const sellerCheckAll = ref(false)
// 购方半选
const isIndeterminate = ref(true)
// 售方半选
const sellerIsIndeterminate = ref(true)
// 购方选中的数据
const checkedCities = ref(['购方1', '购方2', '购方3'])
// 售方选中的数据
const sellerCheckedCities = ref(['售方1', '售方2', '售方3'])
// 购方数据
const purchaser = ref(['购方1', '购方2', '购方3', '购方4'])
// 售方数据
const seller = ref(['售方1', '售方2', '售方3', '售方4'])

//购方全选事件
const handleCheckAllChange = (val) => {
  checkedCities.value = val ? purchaser.value : []
  isIndeterminate.value = false
}
// 购方选择事件
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  purchaserCheckAll.value = checkedCount === purchaser.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < purchaser.value.length
}
// 售方全选事件
const handleSellerCheckAllChange = (val) => {
  sellerCheckedCities.value = val ? seller.value : []
  sellerIsIndeterminate.value = false
}
// 售方选择事件
const handleSellerCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  sellerCheckAll.value = checkedCount === seller.value.length
  sellerIsIndeterminate.value = checkedCount > 0 && checkedCount < seller.value.length
}
// 处理 tab 切换事件
const handleTabChange = (type, index) => {
  console.log(`Tab changed: ${type}, Index: ${index}`);
};
watch(selDate, (newVal) => {
  const date = dayjs(newVal).format("YYYY-MM-DD");
  getData(date);
})
onMounted(
    () => {
      getData(dayjs(selDate.value).format("YYYY-MM-DD"))
    }
)
</script>

<style lang="scss" scoped>
.import {
  font-size: 20px;
}

.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
}
</style>